<template>
  <div class="title" :class="isShow ? '' : 'title_w_40'">
    <p v-show="isShow" style="text-align: left">舒城县 — {{ title }}</p>
    <p>
      <i
        class="el-icon-arrow-right"
        :class="isShow ? 'is_show' : 'is_no_show'"
        @click="clickToggle"
      ></i>
      <i
        class="el-icon-more"
        v-if="isShow && hasMore"
        style="margin-left: 1rem"
        @click="toPath"
      ></i>
    </p>
  </div>
</template>
<script>
export default {
  name: "LeftTitle",
  props: ["title", "isShow", "hasMore", "toUrl"],
  methods: {
    // 点击切换
    clickToggle() {
      this.$emit("toggleTitle");
    },
    toPath() {
      if (this.toUrl) {
        this.$router.push(this.toUrl);
      }
    },
  },
};
</script>
<style>
</style>
<style lang="scss" scoped>
.title {
  width: 99%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.5rem;
  padding-right: 0.5rem;

  border: 1px solid #ccc;
  margin-bottom: 0.625rem;
  font-size: 1.25rem;
  color: #d9e7ff;
  text-shadow: 0 0 0.5rem rgba(2, 3, 7, 0.35);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    width: 0.25rem;
    height: 100%;
    background: rgba(106, 112, 124, 01);
  }

  i {
    cursor: pointer;
  }
}

// 让icon反转
.is_show {
  transition: all 0.5s;
  transform: rotate(180deg);
  /* 进行180度的旋转 */
}

.is_no_show {
  transition: all 0.5s;
  transform: rotate(0deg);
  /* 进行180度的旋转 */
}
.title_w_40 {
  transition: all 0.8s;
  width: 2.5rem;
}
</style>
